<template>
  <view class="min-h-screen bg-[#f8f9fb] flex flex-col relative">
    <!-- 顶部封面图 -->
    <image
      class="w-[100%]"
      src="https://img.cdn1.vip/i/68d366dcc7413_1758684892.webp"
      mode="widthFix"
    />

    <!-- 活动详情卡片（悬浮公告栏） -->
    <view
      class="w-[80%] bg-white rounded-2xl shadow flex flex-col justify-start absolute left-1/2 -translate-x-1/2 top-[30%] p-4"
    >
      <text class="text-lg font-bold block mb-2">{{ detail?.name }}</text>

      <view class="flex items-center mb-2 text-sm text-gray-500">
        <text class="i-carbon-time mr-1" />
        <text
          >{{ dayjs(detail?.registration_start_time).format('YYYY-MM-DD') }} -
          {{ dayjs(detail?.registration_end_time).format('YYYY-MM-DD') }}
        </text>
      </view>

      <view
        v-if="detail?.address"
        class="flex items-center mb-2 text-sm text-gray-500"
      >
        <text class="i-carbon-location mr-1" />
        <text>{{ detail.address }}</text>
      </view>

      <view class="mt-3">
        <text class="text-base text-gray-700 leading-relaxed">
          {{ detail?.description || '暂无描述' }}
        </text>
      </view>
    </view>

    <!-- 底部报名按钮 -->
    <view class="mt-auto bg-white shadow-inner p-4">
      <button
        class="w-full py-3 rounded-xl text-white font-bold bg-gradient-to-r from-blue-500 to-blue-400 active:opacity-80"
        @click="showForm = true"
      >
        立即报名 / 预约
      </button>
    </view>

    <!-- 报名表单 -->
    <wd-popup
      v-model="showForm"
      position="bottom"
      custom-style="border-radius: 16px 16px 0 0;"
    >
      <view class="p-4">
        <text class="text-lg font-semibold block mb-4">填写报名信息</text>

        <wd-input v-model="form.name" label="姓名" placeholder="请输入姓名" />
        <wd-input
          v-model="form.phone"
          label="手机号"
          placeholder="请输入手机号"
        />
        <wd-datetime-picker
          v-model="form.time"
          label="预约时间"
          @confirm="handleConfirm"
        />

        <button
          class="mt-4 w-full py-3 rounded-xl text-white font-bold bg-gradient-to-r from-green-500 to-green-400 active:opacity-80"
          @click="submitForm"
        >
          提交
        </button>
      </view>
    </wd-popup>

    <!-- 报名成功弹窗 -->
    <wd-popup v-model="showQr" position="center">
      <view class="bg-white p-6 rounded-2xl text-center">
        <text class="block text-lg font-semibold mb-4">报名成功</text>
        <image src="/static/qrcode-demo.png" class="w-40 h-40 mx-auto" />
        <text class="block mt-3 text-gray-600 text-sm">
          扫码签到 / 使用服务
        </text>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getEventInfo } from '@/api/event'
import { addSign } from '@/api/sign_up'
import dayjs from 'dayjs'

const detail = ref<ServiceItem>()

const showForm = ref(false)
const showQr = ref(false)

const form = ref({
  name: '',
  phone: '',
  time: Date.now()
})

function handleConfirm({ value }: { value: number }) {
  form.value.time = value
}

async function submitForm() {
  const res = await addSign({
    activity_id: detail.value?.id,
    name: form.value.name,
    phone: form.value.phone,
    signup_time: dayjs(form.value.time).format('YYYY-MM-DD HH:mm:ss')
  })
  if (res.code === 200) {
    uni.showToast({
      title: '报名成功',
      duration: 2000
    })
  } else {
    uni.showToast({
      title: res.msg || '报名失败',
      duration: 2000
    })
  }
  showForm.value = false
  showQr.value = true
}

onLoad(async (options) => {
  const res = await getEventInfo<any, ServiceItem>({
    id: Number(options?.id)
  })
  detail.value = res.data || {}
})
</script>

<style></style>
